<script lang="ts" setup>
import { ref, watch, onMounted, defineProps, defineEmits } from 'vue'

// 记录格式化后的时间
const formattedDate = ref('')
// 定义 props 接收对话框的显示状态
const props = defineProps({
  visible: Boolean,
  finishDate: String  // 父组件传递的finishDate
})
// 记录选择的时间
const date = ref(props.finishDate ? new Date(props.finishDate) : new Date())
// 格式化日期时间函数
const formatDate = (dateString) => {
  // 创建 Date 对象
  const date = new Date(dateString)
  // 检查日期是否有效
  if (isNaN(date.getTime())) {
    console.error('无效的日期字符串:', dateString)
    return 
  }
  // 获取各个部分
  const year = date.getFullYear()
  const month = String(date.getMonth() + 1).padStart(2, '0') // 月份从0开始，需要加1
  const day = String(date.getDate()).padStart(2, '0')

  // 返回格式化的字符串
  return `${year}-${month}-${day}`
}
const emit = defineEmits(['input-date'])
// 重置并发送默认时间
// const resetDefaultDate = () => {
//   console.log('重置日期' + props.finishDate)
//  if (props.finishDate) {
//     date.value = new Date(props.finishDate) // 使用父组件传递的 finishDate
//     console.log('重置为父组件传入日期' + date.value)
//   } else {
//     date.value = new Date() // 使用当前日期
//     console.log('重置为当前日期' + date.value)
//   }
//   formattedDate.value = formatDate(date.value)
//   emit('input-date', formattedDate.value)
// }
const resetDefaultDate = () => {
  console.log('重置日期:', props.finishDate);
  if (props.finishDate && props.finishDate.trim() !== '') {
    const parsedDate = new Date(props.finishDate);
    if (!isNaN(parsedDate.getTime())) {
      date.value = parsedDate; // 使用父组件传递的 finishDate
      console.log('重置为父组件传入日期:', date.value);
    } else {
      date.value = new Date(); // 使用当前日期
      console.log('父组件传入日期无效，重置为当前日期:', date.value);
    }
  } else {
    date.value = new Date(); // 使用当前日期
    console.log('父组件未传入日期，重置为当前日期:', date.value);
  }
  formattedDate.value = formatDate(date.value);
  emit('input-date', formattedDate.value);
};
// 组件挂载时立即发送默认时间
onMounted(resetDefaultDate)
// 监听对话框显示状态
watch(() => props.visible, (newVal) => {
  if (newVal) {
    // 每次对话框打开时重置日期
    resetDefaultDate()
  }
})
// 监听日期变化,向父元素传递时间信息
watch(date, (newVal) => {
  if (newVal) {
    formattedDate.value = formatDate(newVal)
  }else {
    // 如果用户清空了日期，则不设置日期
    formattedDate.value = ''
  }
  emit('input-date', formattedDate.value)
})
// 监听父组件传入的的finishDate变化
watch(() => props.finishDate, (newVal) => {
  if (newVal && newVal.trim() !== '') {
    const parsedDate = new Date(newVal)
    if (!isNaN(parsedDate.getTime())) {
      date.value = parsedDate
      console.log('props.finishDate 变化，更新为:', date.value)
    }
  }
});
</script>

<template>
  <div class="demo-date-picker">
    <div class="block">
      <el-date-picker
        v-model="date"
        type="date"
        placeholder="选择完成日期(可不填)"
        size="default"
      />
    </div>
  </div>
</template>

<style lang="less" scoped>
</style>